<template>
    <div>
      <!-- 搜索框 -->
     <div class="search">
        <input type="text" placeholder="意式风情火腿礼盒"> 
     </div>
     <!-- 导航栏切换分类 -->
   <mt-navbar v-model="active">
      <mt-tab-item id="1">
        肉蛋果蔬
        <img slot="icon" src="@/assets/sc.jpg" alt="">
      </mt-tab-item>
      <mt-tab-item id="2">
        乳品烘焙
        <img slot="icon" src="@/assets/004.png" alt="">
      </mt-tab-item>
      <mt-tab-item id="3">
       零食速食
        <img slot="icon" src="@/assets/007.png" alt="">
      </mt-tab-item>
      <mt-tab-item id="4">
        粮油干货
        <img slot="icon" src="@/assets/025.png" alt="">
      </mt-tab-item>
      <mt-tab-item id="5">
        名酒水饮
        <img slot="icon" src="@/assets/025.png" alt="">
      </mt-tab-item>
      <mt-tab-item id="6">
       营养保健
        <img slot="icon" src="@/assets/025.png" alt="">
      </mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="active">
      <mt-tab-container-item id="1">
       <van-sidebar v-model="activeKey">
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
    </van-sidebar>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
          <!-- 商品 -->
          <div class="content">
            <!-- 商品分类 -->
           <div class="zb">
              <p>牛奶/酸奶</p>
              <p>果汁饮品</p>
              <p>烘焙甜点</p>
              <p>方便菜</p>
              <p>速冻面食</p>
              <p>冷藏肉制品</p>
           </div>
           <!-- 商品内容 -->
           <div class="yb">
             <div class="sp">
               <div><img src="@/assets/xnn1.jpg" alt=""></div>
               <div class="bt"><h6>MM 蒙牛 鲜牛奶 2L</h6>
               <p>优选牧场奶源 精选荷...</p>
               <div class="jg"><p>￥19.9</p><img src="@/assets/shopcar2.png" alt=""></div>
               </div>
             </div>
           </div>
          </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
         <!-- 商品 -->
          <div class="content">
            <!-- 商品分类 -->
           <div class="zb">
              <p>坚果蜜饯</p>
              <p>巧克力/糖果</p>
              <p>薯片膨化</p>
              <p>速冻面食</p>
              <p>零食干点</p>
              <p>饼干曲奇</p>
           </div>
           <!-- 商品内容 -->
           <div class="yb">
             <div class="sp">
               <div><img src="@/assets/xnn1.jpg" alt=""></div>
               <div class="bt"><h6>MM 蒙牛 鲜牛奶 2L</h6>
               <p>优选牧场奶源 精选荷...</p>
               <div class="jg"><p>￥19.9</p><img src="@/assets/shopcar2.png" alt=""></div>
               </div>
             </div>
           </div>
          </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">科技版块</mt-tab-container-item>
       <mt-tab-container-item id="5">科技版块</mt-tab-container-item>
        <mt-tab-container-item id="6">科技版块</mt-tab-container-item>
    </mt-tab-container>
    </div>
</template>
<script>
export default {
  data() {
    return {
      active: '1',
      value:'',
       activeKey: 0,
    }
  },
}
</script>
<style link='@/style/reset.css' >
</style>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.content{
  margin-top:7px;
}
.search{
    margin-left:5px; 
}
.search input{
    width: 95%;
    height: 20px;
}
.content{
    width: 100%;
    display: flex;
}
.content .zb{
    width: 25%;
    font-size: 16px;
    text-align: center;
    padding: 5px;
    background-color: beige;
}
.content .zb p{
  margin-bottom: 30px;
  margin-top:2px;
}
.content .yb{
    width: 75%;
}
.sp img{
  width:60px;
  height: 60px;
  margin-right: 5px ;
}
.sp{
  width: 100%;
  display: flex;
  margin-left:10px;
}
.sp h6{
  font-size: 14px;
  color: rgb(51, 50, 50);
}
.sp p{
  width: 100%;
  font-size: 12px;
  margin-bottom: 3px;
}
.sp .bt{
  width: 75%;
}
.sp .jg{
  display: flex;
}
.sp .jg p{
  color: red;
  font-size: 14px;
}
.sp .jg img{
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

</style>